<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>列表过滤和排序</title>
</head>

<body>
    <div id="app">
        <input type="text" v-model="searchName">
        <ul>
            <li v-for="(p,index) in filterPersons" :key="index">{{index}}--{{p.name}}--{{p.age}}</li>
        </ul>
        <button @click="setOrderType(1)">年龄升序</button>
        <button @click="setOrderType(2)">年龄降序</button>
        <button @click="setOrderType(0)">原本顺序</button>
    </div>
    <script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                searchName: '',
                orderType: 0, //0代表原本顺序，1代表升序，2代表降序
                persons: [{
                        name: 'Tom',
                        age: 18
                    },
                    {
                        name: 'Jack',
                        age: 13
                    },
                    {
                        name: 'Marry',
                        age: 15
                    },
                    {
                        name: 'King',
                        age: 19
                    }
                ]
            },
            computed: {
                filterPersons() {
                    //取出相关的数据
                    const {
                        searchName,
                        persons,
                        orderType
                    } = this;
                    //最终需要显示的数组
                    let fPersons;
                    //对persons进行过滤
                    fPersons = persons.filter(p => p.name.indexOf(searchName) !== -1)

                    //排序
                    if (orderType !== 0) {
                        fPersons.sort(function (p1, p2) { //如果返回负数，p1在前，如果返回正数，p2在前
                            //1代表升序，2代表降序
                            if (orderType === 2) {
                                return p2.age - p1.age
                            } else {
                                return p1.age - p2.age
                            }
                        })
                    }
                    return fPersons;
                }
            },
            methods: {
                setOrderType(orderType) {
                    this.orderType = orderType;
                }
            }
        })
    </script>
</body>

</html>